<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>库存列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="80px">
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                @focus="selectInstitution"
                readonly
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
              <el-select
                class="appointVip"
                v-model="formInline.channelUid"
                placeholder="请选择品牌"
                @change="pinChange"
              >
                <el-option
                  v-for="(val, index) in brand"
                  :label="val.channelName"
                  :value="val.uid"
                  :key="index"
                ></el-option
              ></el-select>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-cascader
                :disabled="sign"
                v-model="formInline.productType"
                :options="options"
                :props="{ emitPath: false }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input
                v-model="formInline.productName"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="库存状态">
              <el-select
                v-model="formInline.status"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上架控制">
              <el-select
                v-model="formInline.upCntCtl"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="保持一致" value="0"></el-option>
                <el-option label="不必保持一致" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            v-if="isAuth('inventorySearch')"
            @click="queryPayActiveLists"
            >搜索</el-button
          >
          <el-button v-if="isAuth('inventoryReset')" type="" @click="reset"
            >重置</el-button
          >
          <el-button
            type="primary"
            style="margin-left: 40px"
            class="butt"
            v-if="isAuth('inStorage')"
            @click="warehousing"
            icon="el-icon-plus"
            >商品入库</el-button
          >
          <el-button
            v-if="totalNum > 0"
            style="margin-left: 10px"
            type="primary"
            @click="payActiveListExport"
            class="butt"
            >导出</el-button
          >
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            @selection-change="handleSelectionChange"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            v-loading="listLoading"
          >
            <el-table-column type="selection" min-width="30"></el-table-column>
            <el-table-column
              prop="parentName"
              min-width="150"
              show-overflow-tooltip
              label="归属机构"
            ></el-table-column>
            <el-table-column
              prop="officeName"
              min-width="150"
              show-overflow-tooltip
              label="机构名称"
            ></el-table-column>
            <el-table-column
              prop="productName"
              min-width="120"
              label="商品名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="channelName"
              min-width="150"
              label="品牌名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="typeName"
              min-width="150"
              label="商品类型"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="allCnt"
              min-width="80"
              show-overflow-tooltip
              label="总库存"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="saledCnt"
              min-width="80"
              label="卖出"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="transferCnt"
              min-width="80"
              label="转让"
            ></el-table-column>
            <el-table-column
              prop="leftCnt"
              show-overflow-tooltip
              min-width="80"
              label="库存数量"
            ></el-table-column>
            <el-table-column
              prop="shopUpCnt"
              show-overflow-tooltip
              min-width="100"
              label="上架数量"
            ></el-table-column>
            <el-table-column prop="" min-width="120" label="上架数量控制"
              ><template slot-scope="scope">
                <span v-if="scope.row.upCntCtl == 0">保持一致</span>
                <span v-if="scope.row.upCntCtl == 1">不保持一致</span>
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">启用</span>
                <span v-if="scope.row.status == 1">停用</span>
              </template>
            </el-table-column>
            <el-table-column min-width="220" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  v-show="!bools"
                  @click="mallShopUpdate(scope.row, 0)"
                  v-if="isAuth('stockShelf')"
                  >上架数量</el-button
                >
                <el-button
                  type="text"
                  v-show="!bools"
                  @click="mallShopUpdate(scope.row, 1)"
                  v-if="isAuth('stockShelf')"
                  >下架数量</el-button
                >
                <el-button
                  type="text"
                  v-show="!bools"
                  v-if="scope.row.status == '1' && isAuth('stockDisabled')"
                  @click="updateStatus(scope.row.id, 0)"
                  >启用</el-button
                >
                <el-button
                  type="text"
                  style="color: #f56c6c"
                  v-show="!bools"
                  v-if="scope.row.status == '0' && isAuth('stockDisabled')"
                  @click="updateStatus(scope.row.id, 1)"
                  >停用</el-button
                >
                <el-button
                  type="text"
                  v-if="bools"

                  @click="configure(scope.row)"
                  >售卖配置</el-button
                >
                <el-button
                  type="text"
                  v-if="bools"
                  @click="catConfig(scope.row)"
                  >入库</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-pagination
          background
          style="text-align: right; padding: 0 20px"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
        <!-- 配置弹框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible1"
          width="500px"
          :before-close="handleClose"
        >
          <div>
            <div class="saleList">
              <div class="saleTitle"><span style="color:red">*</span> 上架控制</div>
              <div class="saleCont">
                <el-select v-model="value">
                  <el-option label="是" value="0"></el-option>
                  <el-option label="否" value="1"></el-option>
                </el-select>
              </div>
              <div style="margin-left:17px">当前库存数量 20</div>
            </div>
            <div class="saleList">
              <div class="saleTitle"><span style="color:red">*</span> 在架数量</div>
              <div class="saleCont">
                <el-input v-model="input" class="numVal" placeholder="请输入在架数量"></el-input>
              </div>
            </div>
            <div class="saleList">
              <div class="saleTitle">最少购买数量</div>
              <div class="saleCont">
               <el-input v-model="input" class="numVal" placeholder="请输入最少购买数量"></el-input>
              </div>
            </div>
            <div class="saleList">
              <div class="saleTitle">最多购买数量</div>
              <div class="saleCont">
                <el-input v-model="input" class="numVal" placeholder="请输入最多购买数量"></el-input>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible1 = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>

    <!-- 上/下架 -->
    <el-dialog
      :title="titles + '操作'"
      :visible.sync="dialogVisible"
      width="400px"
      class="top"
      append-to-body
      :before-close="dialogVisibleShow"
    >
      <el-row>
        <el-form :inline="true" :model="shelves" class="demo-form-inline">
          <el-col>
            <el-form-item label="库存数量：">{{
              shelves.leftCnt
            }}</el-form-item></el-col
          >
          <el-col>
            <el-form-item label="在架数量：">{{
              shelves.shopUpCnt
            }}</el-form-item></el-col
          >
          <el-col>
            <el-form-item
              v-if="titles == '下架'"
              :label="'可' + titles + '数量：'"
              >{{ shelves.shopUpCnt }}</el-form-item
            >
          </el-col>
          <el-col>
            <el-form-item
              v-if="titles == '上架'"
              :label="'可' + titles + '数量：'"
              >{{ shelves.lefts }}</el-form-item
            ></el-col
          >
          <el-col>
            <el-form-item :label="'本次' + titles + '：'">
              <el-input
                class="count"
                @keyup.native="numbers"
                v-model="shelves.num"
                :maxlength="6"
                :placeholder="'请输入本次' + titles + '数量'"
              ></el-input> </el-form-item
          ></el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="shelvesData">确 定</el-button>
      </span>
    </el-dialog>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import axios from "axios";
import qs from "qs";
import Tree from "../tree/index";
// 批量导出
import { exportFile } from "../../plugins/expord";
export default {
  data() {
    return {
      bools: false,
      shelvesId: "",
      titles: "",
      mechanism: null,
      showType: false,
      shelves: {},
      dialogVisible: false,
      NameList: [],
      optionsBrandTypeNum: [],
      BrandTypeList: [],
      productListData: [],
      listDetailsShow: false,
      addInventoryShow: false,
      recordsShow: false,
      channelUid: "",
      listLoading: false,
      Sid: "",
      jurisdiction: "",
      formInline: {
        productType: "",
        oemUid: localStorage.getItem("uid"), //OEMid
        idList: [],
        status: "",
        startDate: "",
        endDate: "",
        upCntCtl: "",
        page: 1,
        number: 20,
        productName: "",
        channelUid: "",
        productUid: "",
        productCode: "",
        // oemUid: localStorage.getItem('uid'),
        officeUid: "", //机构ID
        organizationName: "", //机构名
      },
      dataTime: [],
      channelTypeList: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      dialogVisible1: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      from: false,
      SelectData: [],
    };
  },
  components: {
    Tree,
  },
  created() {
    let _this = this;
    // 品牌名称
    https
      .mallBrand({ oemUid: localStorage.getItem("uid") })
      .then(function (d) {
        if (d.data.code == "0000") {
          _this.brand = d.data.data;
        } else {
          layer.open({
            content: d.data.msg,
            skin: "msg",
            time: 2, //2秒后自动关闭
          });
        }
      })
      .catch(function (error) {});
    // 商品类型
    https
      .mallCommodity({ oemUid: _this.formInline.oemUid })
      .then((res) => {
        if (res.data.code == "0000") {
          _this.options = res.data.data;
        } else {
          layer.open({
            content: d.data.msg,
            skin: "msg",
            time: 2, //2秒后自动关闭
          });
        }
      })
      .catch(() => {});
  },
  mounted() {
    this.queryPayActiveList(); //展示列表
    this.jurisdiction = localStorage.getItem("jurisdiction"); //权限字段获取
  },
  methods: {
    // 售卖配置
    configure(val) {
      console.log(val);
      this.dialogVisible1 = true;
    },
    // 入库点击
    catConfig(val){
      console.log(val)
    },
    numbers() {
      this.shelves.num = this.shelves.num.replace(/[^\.\d]/g, "");
      this.shelves.num = this.shelves.num.replace(".", "");
    },
    // 列表选中
    handleSelectionChange(val) {
      this.SelectData = val;
    },
    // 搜索
    queryPayActiveLists() {
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    //这里开始
    transmit(data) {
      //归属机构的uid
      this.form.officeUid = data.uid;
      //归属机构名字
      this.mechanism = data.name;
      this.formInline.officeUid = data.uid;
    },
    //设置取消的
    determine() {
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束
    // 上下架关闭对话框
    dialogVisibleShow() {
      this.dialogVisible = false;
      this.shelves = {};
    },
    // 重置
    reset() {
      this.formInline.status = "";
      this.formInline.upCntCtl = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.productCode = "";
      this.formInline.channelName = "";
      this.formInline.officeName = "";
      this.formInline.channelUid = "";
      this.formInline.productName = "";
      this.formInline.productType = "";
      this.formInline.officeUid = "";
      this.formInline.page = 1;
      this.mechanism = "";
      this.dataTime = [];
      this.formInline.organizationName = "";
      this.queryPayActiveList();
    },
    // 操作上架 下架切换
    mallShopUpdate(row, type) {
      this.shelvesId = row.id;
      this.shelvesIds = row.upCntCtl;
      this.dialogVisible = true;
      this.shelves = JSON.parse(JSON.stringify(row));
      this.shelves.lefts = this.shelves.leftCnt - this.shelves.shopUpCnt;

      this.titles = type === 0 ? "上架" : "下架";
    },
    // 商品入库
    warehousing() {
      this.$router.push("addInventory");
    },
    // 上架 输入框
    shelvesData() {
      if (+this.shelves.num < 1) {
        return layer.open({
          content: "请重新输入本次" + this.titles + "数量",
          skin: "msg",
          time: 2,
        });
      }
      let pl = {
        id: this.shelvesId,
        shopUpCnt: +this.shelves.num,
        shopUpStatus: this.titles === "上架" ? 0 : 1,
      };
      if (
        this.titles == "上架" &&
        this.shelvesIds == 0 &&
        +this.shelves.num > this.shelves.leftCnt - this.shelves.shopUpCnt
      ) {
        return layer.open({
          content: "本次" + this.titles + "，不可超过" + this.titles + "数量",
          skin: "msg",
          time: 2,
        });
      }
      if (this.titles == "下架" && +this.shelves.num > this.shelves.shopUpCnt) {
        return layer.open({
          content: "本次" + this.titles + "，不可超过" + this.titles + "数量",
          skin: "msg",
          time: 2,
        });
      }
      if (this.shelves.num == "" || this.shelves.num == undefined)
        return layer.open({
          content: this.titles + "数量不能为空",
          skin: "msg",
          time: 2,
        });
      https.mallShopUpdate(pl).then((res) => {
        if (res.data.code !== "0000") {
          this.dialogVisible = false;
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
        }
        this.dialogVisible = false;
        this.shelves = {};
        this.queryPayActiveList();
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2,
        });
      });
    },
    // 启用停用按钮切换
    updateStatus(uid, status) {
      let title;
      if (status == "1") {
        title = "停用后,此商品不在APP展示，用户无法购买";
      } else {
        title = "启用后,此商品将重新展示在APP中，用户可见可购买";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.changeStatusInterface(uid, status);
      });
    },

    //启用停用操作调用接口
    changeStatusInterface(uid, status) {
      let pl = {
        uid: uid,
        status: status,
      };
      https.updateStatus(pl).then((res) => {
        if (res.data.code !== "0000") {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
        }
        this.queryPayActiveList();
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2,
        });
      });
    },

    // 显示列表
    queryPayActiveList() {
      this.SelectData = [];
      if (this.from == true) return;
      this.from = true;
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      this.formInline.channelUid = this.formInline.channelUid;

      if (localStorage.getItem("jurisdiction") == 0) {
        this.formInline.oemUid = localStorage.getItem("uid");
      }
      https.mallList(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
          this.listLoading = false;
          this.from = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.from = false;
        this.listLoading = false;
      });
    },
    //批量导出
    payActiveListExport() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          this.formInline.idList.push(+this.SelectData[i].id);
        }
      } else {
        this.formInline.idList = [];
      }
      var _this = this;
      exportFile("/api/mall/excel/export", _this.formInline, "库存列表")
        .then((res) => {
          return;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //分页 每页多少条数据
    handleSizeChange(val) {
      this.SelectData = [];
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    //分页 当前页
    handleCurrentChange(val) {
      this.SelectData = [];
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
  },
};
</script>

<style scoped>
.saleList{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .numVal{
  width: 320px;
}
/deep/ .numVal .el-input__inner{
  width: 100%;
}
.saleTitle{
  width: 100px;
  margin-right: 10px;
  text-align: right;
}
.con {
  position: relative;
}
.el-main {
  padding: 0 !important;
}
.elP {
  width: 100%;
  margin: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  min-height: 30px;
  display: block;
  float: left;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #409eff;
  border-color: #409eff;
}
.btn {
  float: right;
}

.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.search {
  float: right !important;
  margin-top: 0px !important;
}
.table {
  margin-top: 20px;
}

.top {
  padding-bottom: 20px;
}
/deep/ .el-dialog {
  padding-bottom: 20px;
}
/deep/ .el-cascader {
  line-height: 32px;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
/deep/ .count > .el-input__inner {
  width: 260px;
}
</style>
